<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <base href="${pageContext.request.contextPath}/">
    <link href="bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <!-- 修改市场活动备注的模态窗口 -->
    <div class="modal fade" id="editRemarkModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 40%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">修改备注</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <%-- 备注的id --%>
                        <input type="hidden" id="edit-id">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">内容</label>
                            <div class="col-sm-10" style="width: 81%;">
                                <textarea class="form-control" rows="3" id="edit-noteContent"></textarea>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="edit()">更新</button>
                </div>
            </div>
        </div>
    </div>



    <!-- 返回按钮 -->
    <div style="position: relative; top: 35px; left: 10px;">
        <a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD"></span></a>
    </div>

    <!-- 大标题 -->
    <div style="position: relative; left: 40px; top: -30px;">
        <div class="page-header">
            <h3>市场活动-${activity.name} <small>${activity.startDate} ~ ${activity.endDate}</small></h3>
        </div>

    </div>

    <br/>
    <br/>
    <br/>

    <!-- 详细信息 -->
    <div style="position: relative; top: -70px;">
        <div style="position: relative; left: 40px; height: 30px;">
            <div style="width: 300px; color: gray;">所有者</div>
            <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${activity.userName}</b></div>
            <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">名称</div>
            <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${activity.name}</b></div>
            <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
            <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
        </div>

        <div style="position: relative; left: 40px; height: 30px; top: 10px;">
            <div style="width: 300px; color: gray;">开始日期</div>
            <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${activity.startDate}</b></div>
            <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">结束日期</div>
            <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>${activity.endDate}</b></div>
            <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
            <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
        </div>
        <div style="position: relative; left: 40px; height: 30px; top: 20px;">
            <div style="width: 300px; color: gray;">成本</div>
            <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>${activity.cost}</b></div>
            <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
        </div>
        <div style="position: relative; left: 40px; height: 30px; top: 30px;">
            <div style="width: 300px; color: gray;">创建者</div>
            <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${activity.createBy}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">${activity.createTime}</small></div>
            <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
        </div>
        <div style="position: relative; left: 40px; height: 30px; top: 40px;">
            <div style="width: 300px; color: gray;">修改者</div>
            <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>${activity.editBy}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">${activity.editTime}</small></div>
            <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
        </div>
        <div style="position: relative; left: 40px; height: 30px; top: 50px;">
            <div style="width: 300px; color: gray;">描述</div>
            <div style="width: 630px;position: relative; left: 200px; top: -20px;">
                <b>
                    ${activity.description}
                </b>
            </div>
            <div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
        </div>
    </div>

    <!-- 备注 -->
    <div style="position: relative; top: 30px; left: 40px;">
        <div class="page-header">
            <h4>备注${activity.id}</h4>
        </div>

        <div id="remarkList">
            <!-- 备注1 -->
            <%--<div class="remarkDiv" style="height: 60px;">
                <img title="zhangsan" src="image/user-thumbnail.png" style="width: 30px; height:30px;">
                <div style="position: relative; top: -40px; left: 40px;" >
                    <h5>哎呦！</h5>
                    <font color="gray">市场活动</font> <font color="gray">-</font> <b>发传单</b> <small style="color: gray;"> 2017-01-22 10:10:10 由zhangsan</small>
                    <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
                        <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
                    </div>
                </div>
            </div>--%>
        </div>

        <div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
            <form id="dataForm" role="form" style="position: relative;top: 10px; left: 10px;">
                <textarea id="save-noteContent" class="form-control" style="width: 850px; resize : none;" rows="2"  placeholder="添加备注..."></textarea>
                <p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
                    <button id="cancelBtn" type="button" class="btn btn-default">取消</button>
                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                </p>
            </form>
        </div>
    </div>
    <div style="height: 200px;"></div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">

    //默认情况下取消和保存按钮是隐藏的
    var cancelAndSaveBtnDefault = true;

    $(function(){
        $("#save-noteContent").focus(function(){
            if(cancelAndSaveBtnDefault){
                //设置remarkDiv的高度为130px
                $("#remarkDiv").css("height","130px");
                //显示
                $("#cancelAndSaveBtn").show("2000");
                cancelAndSaveBtnDefault = false;
            }
        });

        $("#cancelBtn").click(function(){
            //显示
            $("#cancelAndSaveBtn").hide();
            //设置remarkDiv的高度为130px
            $("#remarkDiv").css("height","90px");
            cancelAndSaveBtnDefault = true;
        });
        initRemarkList();
    });
    //在javaScript中通过EL表达式可以直接获取域对象中的数据，
    // 如果获取的数据为数字类型直接使用即可，如果获取的数据为字符串类型需要使用引号包裹
    var activityID = '${activity.id}';
    var userName = '${activity.userName}';
    //加载备注列表
    function initRemarkList(){
        $.ajax('activityRemark/list',{
            type:'get',
            data:{
                activityID:activityID
            },
            success:function (res) {
                if (res.code == 0){
                    var str = '';
                    /**
                     * <!-- 备注2 -->
                     <div class="remarkDiv" style="height: 60px;">
                     <img title="zhangsan" src="image/user-thumbnail.png" style="width: 30px; height:30px;">
                     <div style="position: relative; top: -40px; left: 40px;" >
                     <h5>呵呵！</h5>
                     <font color="gray">市场活动</font> <font color="gray">-</font> <b>发传单</b> <small style="color: gray;"> 2017-01-22 10:20:10 由zhangsan</small>
                     <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
                     <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
                     &nbsp;&nbsp;&nbsp;&nbsp;
                     <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
                     </div>
                     </div>
                     </div>
                     */
                    $.each(res.data,function () {
                        /*str += this.id +"---"+this.noteContent;*/
                        str += '<div class="remarkDiv" style="height: 60px;">';
                        str += '<img title="'+userName+'" src="image/user-thumbnail.png" style="width: 30px; height:30px;">';
                        str += '<div style="position: relative; top: -40px; left: 40px;" >';
                        str += '<h5>'+this.noteContent+'</h5>';
                        str += '<small style="color: gray;"> '+this.createTime+' 由 '+this.createBy+'</small>';
                        str += '<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">';
                        str += '<a class="myHref" href="javascript:get(\''+this.id+'\');"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>';
                        str += '&emsp;';
                        str += '<a class="myHref" href="javascript:remove(\''+ this.id +'\');"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>';
                        str += '</div></div></div>';
                    });
                    $('#remarkList').html(str);


                    $(".remarkDiv").mouseover(function(){
                        $(this).children("div").children("div").show();
                    });

                    $(".remarkDiv").mouseout(function(){
                        $(this).children("div").children("div").hide();
                    });

                    $(".myHref").mouseover(function(){
                        $(this).children("span").css("color","red");
                    });

                    $(".myHref").mouseout(function(){
                        $(this).children("span").css("color","#E6E6E6");
                    });
                }
            }
        });
    }

    //新增
    function save() {
        $.ajax('activityRemark/save',{
            type: 'post',
            contentType:'application/json',
            data:JSON.stringify({
                noteContent:$('#save-noteContent').val(),
                activityID:activityID
            }),
            success:function (res) {
                if (res.code == 0){
                    alert('新增成功')
                    //清除备注表单
                    cancal();
                    //刷新表格
                    initRemarkList();
                }
            }
        })
    }

    //打开编辑回显数据
    function get(id) {
        $.ajax('activityRemark/find/'+id,{
            type:'get',
            success:function (res) {
                if (res.code == 0){
                    //渲染查询到的数据
                    $('#edit-id').val(res.data.id);
                    $('#edit-noteContent').val(res.data.noteContent);
                    //显示模态框
                    $('#editRemarkModal').modal('show');
                }
            }
        })
    }

    //修改更新
    function edit() {
        $.ajax('activityRemark/edit',{
            type: 'put',
            contentType:'application/json',
            data:JSON.stringify({
                id:$('#edit-id').val(),
                noteContent:$('#edit-noteContent').val(),
            }),
            success:function (res) {
                if (res.code == 0){
                    alert('编辑成功')
                    //清除备注表单
                    cancal();
                    //关闭窗体
                    $('#editRemarkModal').modal('hide');
                    //刷新表格
                    initRemarkList();
                }
            }
        })
    }

    //刷新备注表单
    function cancal() {
        //显示
        $("#cancelAndSaveBtn").hide();
        //设置remarkDiv的高度为130px
        $("#remarkDiv").css("height","90px");
        cancelAndSaveBtnDefault = true;
        $('#dataForm')[0].reset();
    }

    //删除
    function remove(id){
        if (confirm('确定删除数据吗？')){
            $.ajax('activityRemark/deleteById/'+id,{
                type:'delete',
                success:function (res) {
                    if (res.code == 0){
                        alert('删除成功！');
                        initRemarkList();
                    }else {
                        //弹出错误提示信息
                        alert(res.data);
                    }
                }
            })
        }
    }


</script>
</body>
</html>